<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的心</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 让容器的高度、宽度充满全屏 */
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: pink;
            /* 因为只有一个项目，所以对body直接设置，让所要画的内容居中显示方法 */
            display: flex;
            flex-direction: row;
            /* 上下、左右居中 */
            align-items: center;
            justify-content: center;
            
        }
        .heart{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <style>
        /* ======两个半圆角====绘制===== */
        .heart{
            position: relative;
        }
        .heart::before{
            content: "";
            width: 200px;
            height:100px ;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: -99px;
            /* 圆角效果 */
            border-radius: 100px 100px 0 0;
        }
        .heart::after{
            content: "";
            width: 100px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: -99px;
            top: 0;
            /* 圆角效果 */
            border-radius: 100px 0 0 100px;
        }
        .heart{
            transform: rotate(45deg);
        }
    </style>
    
    <style>
        /* ===========利用动画@keyframes实现跳动的心========== */
        @keyframes heartbit{
            0%{
                /* ====初始状态：旋转45度，缩放为原来的0.6， */
                transform: rotate(45deg) scale(0.6);
            }
            
            
            100%{
                transform: rotate(45deg) scale(1.4);
            }
        }
        .heart{
            animation: heartbit 1s infinite alternate;
        }
    </style>
    <style>
        /* =====朦胧==== */
        .heart{
            box-shadow: 0 0 30px red;
        }
        .heart::before{
            box-shadow: 0 0 30px red;
        }
        .heart::after{
            box-shadow: 0 0 30px red;
        }
        
    </style>

</head>
<body>
    <div class="heart"></div>
    
</body>
</html>